<template>
	<view class="login-container">
		<view class="logo">
			<image src="/static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="form">
			<view class="input-group">
				<input type="text" v-model="username" placeholder="请输入用户名" />
			</view>
			<view class="input-group">
				<input type="password" v-model="password" placeholder="请输入密码" />
			</view>
			<button class="login-btn" @click="handleLogin">登录</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: ''
		}
	},
	methods: {
		handleLogin() {
			if (!this.username || !this.password) {
				uni.showToast({
					title: '请输入用户名和密码',
					icon: 'none'
				})
				return
			}
			// TODO: 实现登录逻辑
			uni.switchTab({
				url: '/pages/device/control'
			})
		}
	}
}
</script>

<style lang="scss">
.login-container {
	padding: 50rpx;
	.logo {
		text-align: center;
		margin: 100rpx 0;
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}
	.form {
		.input-group {
			margin-bottom: 30rpx;
			input {
				width: 100%;
				height: 90rpx;
				padding: 0 30rpx;
				border: 1px solid #ddd;
				border-radius: 45rpx;
				font-size: 28rpx;
			}
		}
		.login-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: #007AFF;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
		}
	}
}
</style> 